<template>
  <a-modal v-model:visible="isShow" title="预览" @cancel="onClose">
    <template #footer>
      <a-button key="back" @click="onClose">关闭</a-button>
    </template>
    <div class="player-container">
      <div class="mt16" id="myPlayer"></div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, onMounted, watch, onBeforeUnmount } from 'vue'
import { TaskFileUrl } from '@g/data'
import Player from 'xgplayer/dist/simple_player';
let myPlayer: any = undefined
const emits = defineEmits<{
  (emit: 'close'): void,
  (emit: 'ok'): void,
}>()
const props = defineProps<{
  visible: Boolean,
  src: string
}>()

const isShow = computed({
  get() {
    return props.visible
  },
  set() {
    emits('close')
  }
})
function onClose() {
  handleVideoStop()
  emits('close')
}
const handleVideoStop = () => {
  myPlayer && myPlayer.pause();
}
function handlePlay() {
  if (!props.src) {
    return
  }
  const videoSrc = TaskFileUrl + props.src
  if (!myPlayer) {
    myPlayer = new Player({
      id: 'myPlayer',
      autoplay: false,
      width: 450,
      height: 450,
      url: videoSrc,
      poster: "",
      // controlPlugins: [
      //   volume,
      //   playbackRate
      // ],
      playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
    })
  } else {
    myPlayer.url = videoSrc;
  }
}
onBeforeUnmount(() => {
  handleVideoStop()
})
onMounted(() => {
  handlePlay()
})
watch(
  () => props.src,
  (newValue) => {
    if (newValue) {
      setTimeout(() => {
        handlePlay()
      }, 100);
    }
  }
);


</script>

<style scoped lang="less">
.player-container {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>